<template>
	<view>
		<view class="cu-form-group query-bar margin-bottom">
			<view class="switch-box" @click="changeChannel()">
				<image src="../../static/image/fund.png" v-if="type"></image>
				<image src="../../static/image/stock.png" v-else></image>
			</view>
			<input placeholder="请输入名称或代码,支持模糊搜索" v-model="iptValue">
			<button @click="search" class='cu-btn bg-orange sm shadow'>搜索</button>
		</view>
		<view class="result-box">
			<view class="header-box flex bg-white padding">
				<view class="flex-sub text-center text-bold">名称/代码</view>
				<view class="flex-sub text-center text-bold" v-if="type">{{type?'类型':'最新价'}}</view>
				<view class="flex-sub text-center text-bold">添加自选</view>
			</view>
			<view class="flex bg-white padding" v-for="item in dataList" :key="item.code" @click="detail(item)">
				<view class="flex-sub text-center">
					<text>{{type?item[2]:item[1]}}</text><br>
					<text class="text-gray text-sm">{{item[0]}}</text>
				</view>
				<view class="flex-sub text-center" v-if="type">
					<text>{{item[3]}}</text>
				</view>
				<view class="flex-sub text-center">
					<text v-if="isFavor(item[0])" @click.stop="setDel(item[0])" class="cuIcon-favorfill text-yellow">
					</text>
					<text v-if="!isFavor(item[0])" @click.stop="setCheck(item[0])" class="cuIcon-favorfill">
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      type: true,
      iptValue: "",
      dataList: [],
    };
  },
  computed: {
    ...mapGetters(["favor", "holding"]),
  },
  methods: {
    changeChannel() {
      this.type = !this.type;
      this.iptValue = "";
      this.dataList = [];
    },
    search() {
      this.iptValue = this.iptValue.replace("，", ",");
      if (this.type) {
        uni
          .request({
            url: "https://api.doctorxiong.club/v1/fund/all?keyWord=" + this.iptValue,
          })
          .then((res) => {
            if (res.data.data.length) {
              this.dataList = res.data.data;
              this.iptValue = "";
            } else {
              uni.showToast({
                title: "没有搜索到基金",
                icon: "error",
              });
            }
          });
      } else {
        uni
          .request({
            url: "https://api.doctorxiong.club/v1/stock/all?keyWord=" + this.iptValue,
          })
          .then((res) => {
            if (res.data.data.length) {
              this.dataList = res.data.data;
              this.iptValue = "";
            } else {
              uni.showToast({
                title: "没有搜索到股票",
                icon: "error",
              });
            }
          });
      }
    },
    isFavor(code) {
      return this.type
        ? this.favor.fund.includes(code)
        : this.favor.stock.includes(code);
    },
    setCheck(code) {
      let keyword = this.type ? "fund" : "stock";
      this.favor[keyword].push(code);
      this.$store.commit("setFavor", this.favor);
      uni.showToast({
        title: "添加成功",
      });
    },
    setDel(code) {
      let keyword = this.type ? "fund" : "stock";
      const index = this.favor[keyword].findIndex((e) => e === code);
      this.favor[keyword].splice(index, 1);
      // 删除自选对应的持仓信息
      const hIndex = this.holding[keyword].findIndex((e) => e.code === code);
      if (hIndex > -1) {
        this.holding[keyword].splice(hIndex, 1);
      }
      this.$store.commit("setHolding", this.holding);
      this.$store.commit("setFavor", this.favor);
      uni.showToast({
        title: "取消自选",
      });
    },
    // 查看详情
    detail(item) {
      uni.navigateTo({
        url: `/pages/mine/detail?item=${JSON.stringify(item)}`,
      });
    },
  },
};
</script>

<style>
.switch-box image {
  height: 30px;
  width: 30px;
}
</style>
